Formation Stencil.
Score de satisfaction : 4.54/5
Durée :
2 jours
Distanciel et 16 villes en France
numero vert : 0805 950 800 (service et appel gratuits)
à partir de
1300 €HT

Référence :
SF33647
Durée :
2 jours

Vous souhaitez une session sur-mesure (intra) ?
Ce stage comprend
 14 heures de formation
Support de cours numérique
Pauses et snacks à volonté
Prise en charge OPCO possible
Disponible à distance

Formation Stencil.

Développez et partagez des web components grâce à notre formation de 2 jours !

Stencil permet aux développeurs de concevoir des composants web personnalisés, utilisables sur différents frameworks (Angular, Vue, React…). La démocratisation et l’utilisation croissante de ces Web Components pourrait marquer un tournant dans le développement d’applications web. Notre formation Stencil vous permettra de prendre en main les concepts relatifs à ce nouveau standard, avant d’apprendre à créer vos propres composants avec Stencil. Tirez profit de technologies modernes comme JSX et TypeScript pour améliorer significativement les performances de vos applications, et entrez pleinement dans le monde des Web Components grâce à notre formation de référence !

Objectifs pédagogiques.

1Comprendre l'intérêt de Stencil et des Web Components

2Créer des composants web réutilisables

3Intégrer Stencil au sein d'un framework de développement web

Prérequis : Connaissances de TypeScript ou JSX, HTML et CSS
Partagez cette formation

Programme de formation Stencil.

Introduction à la formation Stencil

Retour général sur le développement web
Qu’est-ce qu’un Web Component ?
Intérêt pour les développeurs et cas d’utilisation
Historique, positionnement et raison d’être de Stencil
Objectifs de cette formation Stencil

Les Web Components

Concepts fondamentaux et spécifications W3C
Utiliser les templates
Importer du code HTML
Travailler avec le Shadow DOM (encapsulation)
Créer des Custom Elements
Les limites des Custom Elements : support des navigateurs (polyfills), temps de compilation, syntaxe…

Présentation de Stencil

Qu’est-ce que Stencil ? Qu’est-ce que Stencil n’est pas ?
Fonctionnement et concepts fondamentaux
Bénéfices : performance, stabilité, interopérabilité et familiarité
Différences et avantages par rapport à Angular, React, Vue, Polymer, etc
Ressources communautaires
Installer Stencil et ses dépendances

Premiers pas avec les composants Stencil

Démarrer un projet et comprendre la structure initiale
Créer un premier composant Stencil
Anatomie d’un composant Stencil : décorateurs, classes, propriétés…
Fichiers de configuration et styles CSS
Bonnes pratiques (nommage des composants, organisation du code…)

Propriétés, méthodes et gestion de l’état des composants

Vue d’ensemble des décorateurs Stencil : component, prop, watch, etc
Cycle de vie des composants et méthodes
Le décorateur @Prop() : ajouter des propriétés aux composants Stencil
Gérer les attributs
Définir l’état d’un composant avec @State()
Différences entre States et Props
Hiérarchie et communication entre composants

Gestion des évènements et interactions utilisateur

Events et Listeners
Décorateur @Event() et classe EventEmitter
Utiliser @Listen() pour gérer les évènements
Les items Context
Manipuler tableaux, objets et fonctions au sein des composants

Routage

Installer le package @stencil/router
Les composants inclus (stencil-router, stencil-route, stencil-route-link…)
Définir et configurer des routes
Navigation statique et programmatique
Transmettre des données via une route

Formulaires

Développer un composant contenant un formulaire
Formulaires avancés

Tests unitaires

Configuration du fichier package.json
Les fonctions render() et flush()
Tester les méthodes de composants

Mise en production

Déployer une application Stencil
Publier des web components créés avec Stencil
Collections de composants
Permettre la personnalisation d’un composant avec le tag <slot />

Service Workers

L’API Service workers et les PWAs (Progressive Web Apps)
Utiliser Workbox
Options de configuration
Utiliser un service worker personnalisé

Intégration des composants

Utiliser des composants Stencil avec d’autres frameworks : Angular, React, Vue, Ember

Notre charte qualité et éthique.

A travers sa Charte Engagement Qualité, Sparks s’engage à tout mettre en œuvre pour que chaque session de formation soit un succès et que votre satisfaction soit totale.

En apprendre davantage sur Stencil.

Les standards du développement web évoluent si vite que les développeurs ont parfois du mal à suivre le rythme. De nouvelles APIs, fonctionnalités, de nouveaux frameworks et outils sont introduits régulièrement : ES6, TypeScript, Webpack, ou des bibliothèques comme Polymer et Stencil obligent les entreprises du numérique à constamment maintenir leurs compétences à jour. Aujourd’hui, l’une des tendances induites par les frameworks web, hybrides ou mobiles est l’utilisation des Web Components.

Stencil est un compilateur open source utilisé pour générer des composants web et des progressive web apps (PWA). Développé par l’équipe Ionic et annoncé durant le Polymer Summit de 2017, Stencil propose une approche des Web Components centrée sur l’utilisation des Custom Elements. Il fonctionne avec une large gamme d’outils permettant de développer des applications performantes, et dont la mise en production se fait aisément. Basé sur TypeScript et JSX, Stencil compile ainsi des composants en composants web, conformes aux normes et qui peuvent être utilisés dans d’autres frameworks tels que Preact ou React, ou même sans framework du tout.

En amont de votre formation Stencil, découvrez ci-dessous la vidéo de présentation de l’outil par l’équipe Ionic :

Amandine de Sparks
Des chiffres étincelants.
19 années
à vos côtés
+ de 1000
sujets de formation
8155
stagiaires formés en 2023
238
formateurs actifs en 2023
97,9%
de stagiaires satisfaits
24622
heures de formation réalisées en 2023
HAUT